<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>系统更新</title>
  </head>
  <script>
    const { ipcRenderer } = require('electron')
    function closeWindow() {
      ipcRenderer.send('close-update-window')
    }

    function btnRstClick() {
      ipcRenderer.send(
        'register-update',
        'http://oss-www.ibangche.com/crm/jxhf'
      )
    }

    ipcRenderer.on('update-result', (...args) => {
      console.log('更新结果')
      console.log(args)
    })
  </script>
  <body>
    <div id="app">
      <div class="header">
        <img src="/icons/icon.png" />
        <div style="margin-top:60px;">版本号：v0.0.1</div>

        <div class="win-close" onclick="closeWindow()" >
          <img src="/default/icon/icon_close_2.png" />
        </div>
      </div>
      <div class="content">
        更新内容：
        <p style="margin-top:6px;">1、修复已存在的问题</p>
        <p>2、更新新功能</p>
        <p>3、性能优化</p>
      </div>
      <div class="footer">
        <button onclick="btnRstClick()">一键更新</button>
      </div>
    </div>
  </body>
</html>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    background-color: #fff;
    -webkit-app-region: drag;
    padding: 32px;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header img {
    width: 80px;
  }
  .header div {
    color: #555;
    font-size: 13px;
  }
  .win-close {
    -webkit-app-region: no-drag;
    position: absolute;
    right: 30px;
    top: 30px;
    width: 30px;
    cursor: pointer;
  }
  .win-close img {
    width: 100%;
    opacity: 0.3;
    transition: 0.3s all;
  }
  .content {
    background-color: #eee;
    margin-top: 30px;
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    height: 120px;
    overflow: auto;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .footer button {
    background-color: #3c6ef0;
    border: 0px;
    width: 100px;
    height: 32px;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 2px;
    font-size: 14px;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }
  .footer button:hover {
    background-color: #215cf1;
  }
</style>
